<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- 响应式布局 -->
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>12306登录</title>
		<link rel="stylesheet" href="resources/layui/css/layui.css">
		<link rel="stylesheet" href="resources/css/login.css" />
		<script src="resources/js/jquery-3.7.1.min.js"></script>
	</head>
	<body>
		<div>
			<div class="top">
				<h1 class="topmessage">
					<a href="">
						<img src="resources/img/12306logo.png" alt="12306 Logo">
					</a>
				</h1>
				<div class="welcome">欢迎登录12306</div>
			</div>
			<div class="mian">
				<div class="layui-carousel" id="test1">
					<div carousel-item>
						<div>
							<img src="https://www.12306.cn/index/images/pic/banner-login-20200924.jpg" alt=""
								class="img_1" />
						</div>
						<div>
							<img src="https://www.12306.cn/index/images/pic/banner-login-20200629.jpg" alt=""
								class="img_2" />
						</div>
					</div>
				</div>
			</div>
			<div class="login-box">
				<ul class="title">
					<li class="title_head1">
						<a href="">账号登录</a>
					</li>
					<ul class="head_L">|</ul>
					<li class="title_head2">
						<a href=""> 扫码登录</a>
					</li>
				</ul>
				<div class="login_main">
					<form class="layui-form" action="">
						<div class="layui-form-item">
							<div class="layui-input-block">
								<input type="text" name="useracc" required lay-verify="required"
									placeholder="用户名/邮箱/手机号" autocomplete="off" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item">
							<div class="layui-input-block">
								<input type="password" name="userpwd" required lay-verify="required" placeholder="请输入密码"
									autocomplete="off" class="layui-input">
							</div>
						</div >

						<div style="margin-left: 110px;">
							<input type="text" id="code" name="code" class="code" placeholder="请输入验证码">
						 	<img  id="vcode" src="" style="width: 120px; height: 40px;" onclick="getVcode()"><br/>
						</div>
											
						<div class="layui-form-item">
							<div class="layui-input-block">
								<button class="layui-btn layui-btn-normal" lay-submit lay-filter="login">立即登录</button>
							</div>
						</div>
					</form>
				</div>
				<ul class="pwd">
					<li class="pwd_down_1">
						<a href="reg" style="color: #0055ff;">注册12306账号</a>

					</li>
					<ul class="head_L_2">|</ul>
					<li class="pwd_down_2">
						<a href="">忘记密码？</a>
					</li>
				</ul>
				<div class="p">
					<p class="p_title">
						铁路12306每日5:00至次日1:00（周二为5:00至24:00）提供购票、改签、变更到站业务办理， 全天均可办理退票等其他服务。
					</p>
				</div>
			</div>

		</div>
		<div class="down_1">
			<div id="footer12306"></div>
		</div>

		</div>

		<script src="resources/layui/layui.js"></script>
		<script>

			var key = 0;
			getVcode();
			function getVcode(){
				key = new Date().getTime()
				$("#vcode").prop("src","/Train_war_exploded/user/getVcode?key="+key)

			}
			layui.use(['carousel', 'form'], function() {
				var carousel = layui.carousel;
				var form = layui.form;
				//建造实例
				carousel.render({
					elem: '#test1',
					width: '100%', //设置容器宽度
					height: '100%', //设置容器高度
					arrow: 'none', //始终显示箭头
					indicator: 'inside', //取消指示器
					anim: 'default', //切换动画方式
					interval: '2000', //切换时间间隔

				});

				function loadComponent(id, url) {
					$("#" + id).load(url); // 使用 jQuery 的 load 方法
				}
				loadComponent("footer12306", "footer");

				// 监听提交
				form.on('submit(login)', function(data) {
					console.log(data.field); // 获取表单数据
					$.ajax({
						url: 'user/login',
						type: 'post',
						data: {
							userAcc: data.field.useracc,
							userPwd: data.field.userpwd,
							code:data.field.code,
							key:key,

						},
						dataType:'JSON',
						success: function(response) {

							// 处理服务器返回的数据
							if (response.code == 200) {
							
								// 登录成功
								layer.msg('登录成功');
								
								// 将返回的用户信息存入 sessionStorage
								sessionStorage.setItem('user', JSON.stringify(response.data.data))
								
								// 跳转到首页或其他页面
								window.location.href = 'homepage';

								// 清空输入框内容
								$("#userAcc").val("");
								$("#userPwd").val("");
								$("#code").val("");
							} else {
								// 登录失败
								layer.msg(response.message);
							}
						},
						error: function() {
							layer.msg('请求失败，请稍后重试');
						}
					});
					return false; // 阻止表单跳转。如果需要表单跳转，去掉这段即可。
				});
			});
		</script>
	</body>
</html>